<template>
	<div class="main">
		<div class="top flex-between">
			<div class="left">推荐</div>
			<div class="right">
					<u-icon name="heart" color="#000" size="40" @click="toLikes()"></u-icon>
					<u-icon name="more-circle" color="#000" size="40" @click="toMessage()"></u-icon>
			</div>
		</div>
		<div class="content" :key="userInfos.user_id">
			<div>
				
				<div class="avatar">
					<u-avatar :src="userInfos.avatar" mode="circle" size="100"></u-avatar>
					<div class="nickname">
						<u-row>
							<u-col>
								{{userInfos.nickname}}
							</u-col>
						</u-row>
						<u-row>
							<u-col>
								<button class="btn1">{{userInfos.age}} - {{userInfos.occupation}}</button>
							</u-col>
						</u-row>
					</div>
				</div>
				
				<div class="tags">
					<u-tag :text="itm.tag_name" mode="dark" shape="circle" bg-color="pink"  v-for="itm in userInfos.tags" :key="itm.tag_id"/>
				</div>
				
				<div class="introduction">
					{{userInfos.introduction}}
				</div>
				
				<div class="img-show" v-for="itm2 in userInfos.shows" :key="itm2.img_id">
					<div class="des">
						{{itm2.description}}
					</div>
					<u-image width="100%" height="800rpx" :src="itm2.url"></u-image>
				</div>
				<div class="tools">
					<u-icon name="heart-fill" color="pink" size="80" @click="like(item)"></u-icon>
					<u-icon name="close" color="gray" size="70" @click="noLike(item)"></u-icon>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,ref,onMounted
	} from 'vue';
	import { getTagsByUserId } from '../../api/tags.js'
	import { getUserByRandom,getUserInfoById } from '../../api/user.js'
	import { getImagesByUserId } from '../../api/images.js'
	const userInfos = ref({})
	const indexFlag = ref(false)
	const noLike = (obj) =>{
		randomUser()
	}
	const like = (obj) =>{
		randomUser()
	}
	//路由跳转到聊天
	const toMessage = () =>{
		uni.switchTab({
			url:'/pages/message/message'
		})
	}
	//路由跳转到喜欢的人
	const toLikes = () =>{
		uni.navigateTo({
			url:'/pages/likes/likes'
		})
	}
	const currentUserInfo = ref({})
	//当前用户
	currentUserInfo.value = uni.getStorageSync('userInfo')
	const randomUserInfo = ref({})
	const randomUser = async() => {
		//随机用户
		const result = await getUserByRandom()
		randomUserInfo.value = result.data
		if(currentUserInfo.value.user_id == randomUserInfo.value.user_id){
			randomUser()
		}else{
			userInfos.value = []
			//此时随机用户已经不是自己了，在这里处理信息获取逻辑
			//获取随机用户的用户信息
			const ruser = await getUserInfoById({
				user_id:randomUserInfo.value.user_id
			})
			userInfos.value = ruser.data
			//获取随机用户的标签
			const rtag = await getTagsByUserId({
				user_id:randomUserInfo.value.user_id
			})
			userInfos.value.tags = rtag.data
			userInfos.value.tags.forEach((item) => {
				item.tag_name = item['tag_tab.tag_name']
			})
			//获取 随机用户的个人相册
			const timg = await getImagesByUserId({
				user_id:randomUserInfo.value.user_id
			})
			userInfos.value.shows = timg.data
			return
		}
	}
	onMounted(() => {
		randomUser()
	})
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		position: relative;
		//顶部部分
		.top {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			u-icon:first-child {
				margin-right: 20rpx;
			}
		}

		//下面的个人信息卡片部分
		.content {
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			border: 1px solid #eeeeee;
			//头像栏
			.avatar {
				display: flex;
				padding: 0 20rpx;
				margin-top: 20rpx;
				.u-avatar{
					margin-left: 20rpx;
				}
				.nickname {
					margin-left: 20rpx;
					line-height: 50rpx;
				}
				.btn1{
					width: 180rpx;
					height: 50rpx;
					background-color: rgba(221,221, 221, .15);
					border-radius: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					padding: 0;
					text-align: center;
				}
				uni-button:after{
					border: 0;
				}
			}
			//标签栏
			.tags{
				display: flex;
				flex-wrap: wrap;
				align-content: space-around;
				margin-top: 20rpx;
				u-tag{
					margin:20rpx 20rpx 0 0;
				}
			}
			//自我介绍部分
			.introduction{
				margin-top: 20rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				line-height: 50rpx;
			}
			//图片展示部分
			.img-show{
				.des{
					margin: 20rpx 0;
					padding: 0 20rpx;
					font-size: 28rpx;
					line-height: 50rpx;
				}
			}
			//工具栏部分
			.tools{
				position: fixed;
				bottom: 0;
				right: 20rpx;
				width: 80rpx;
				text-align: center;
				u-icon{
					margin: 20rpx 0;
				}
			}
		}
	}
</style>